<template>
  <div class="hotToday_box flex">
    <div class="track_container flex">
      <div class="track">
        <img :src="item.albumCoverPath" class="track_img">
        <div class="track_text">
         {{ item.title }} 
        </div>
        <div class="track_databoard">
            <div class="track_box1">
                <div class="track_text1">
                    <img src="../../static/homeimg/people.png" class="track_icon">{{item.anchorName}}
                </div>
                <div class="track_text2"><img src="../../static/homeimg/ear.png" class="track_icon">{{(item.playCount /1000).toFixed(2)}}万</div>
            </div>
            </div>
            <div class="track_box2">
                
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import homeApi, { type AlbumsModel, type AlbumsModelList,type subscriptInfoModel, type limitedTimeFreeAlbumModel,type hotTracksModel } from "@/apis/home"
const props = defineProps<{
 item: hotTracksModel
}>()
</script>

<style scoped lang="scss">
// 今日热点
.hotToday_box{
  justify-content: center;
  align-items: center;
  width: 375.2px;
  margin-bottom: 20px;
}
.track_container{
  flex-direction: row;
  flex-wrap: nowrap;
  width: 345.2px;
  // height: 100px;
}
.track{
    width: 260px;
    height: 70px;
}
.track_img{
    float: left;
    width: 70px;
    height: 70px;
    border-radius: 10px;
}
.track_text{
    width: 260px;
    height: 44.15px;
    font-size: 16px;
    color: #40404C;
    margin-left: 80px;
    font-size: 15px;
    line-height: 20px;
}
.track_databoard{
    width: 260px;
    height: 18.8px;
    margin-left: 80px;
}
.track_box1{
    height: 18.4px;
    // float: left;
    // position: relative;
    display: flex;
    justify-content: left;
    align-items: center;
  
    .track_text1{
    // position: absolute;
    // left: 5px;
    display: flex;
    justify-content: left;
    align-items: center ;
    margin-right: 5px;
    height: 20px;
    font-size: 12px;
    color: #999;
    white-space:nowrap;
    &::after{
        margin:1px
    }
}
.track_text2{
    display: flex;
    justify-content: left;
    align-items: center;
    width: 75px;
    height: 18px;
    font-size: 12px;
    color: #999;
    // margin-top: 6px;
    // margin-left: 22px;
}
}
.track_box2{
    width: 50px;
    height: 18.4px;
    float: left;
}
.track_icon{
    width: 12px;
    height: 12px;
    margin-right: 4px;
}


</style>